<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>游玩</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<style type="text/css">
			.list-block{margin: 0;}
		</style>
  </head>
  <body>
    <div class="page-group">
        <div class="page page-current">
	        <header class="bar bar-nav">
					  <a class="button button-link button-nav pull-left back" >
					  	<span class="icon icon-left"></span>
					    返回
					  </a>
					  <h1 class="title">账户管理</h1>
					</header>
					
					<div class="content">
					  <div class="list-block">
					    <ul>
					      <!-- Text inputs -->
					      <li>
					        <div class="item-content">
					          <div class="item-inner">
					            <div class="item-title label">姓名</div>
					            <div class="item-input">
					              <input type="text" placeholder="Your name"value="陈小羽">
					            </div>
					          </div>
					        </div>
					      </li>
					      <li>
					        <div class="item-content">
					          <div class="item-inner">
					            <div class="item-title label">邮箱</div>
					            <div class="item-input">
					              <input type="email" placeholder="E-mail" value="1137******@qq.cpm">
					            </div>
					          </div>
					        </div>
					      </li>
					      <li>
					        <div class="item-content">
					          <div class="item-inner">
					            <div class="item-title label">手机号码</div>
					            <div class="item-input">
					              <input type="text" placeholder="Mobile" value="137136*****" maxlength="11">
					            </div>
					          </div>
					        </div>
					      </li>
					      <li>
					        <div class="item-content">
					          <div class="item-inner">
					            <div class="item-title label">地址</div>
					            <div class="item-input">
					              <input type="text" id='city-picker' value="浙江 杭州 拱墅区" />
					            </div>
					          </div>
					        </div>
					      </li>
					      <li>
					        <div class="item-content">
					          <div class="item-inner">
					            <div class="item-title label">性别</div>
					            <div class="item-input" >
					              <input type="text" placeholder="Your Sex"value="男" class="create-actions" id="sex">
					            </div>
					          </div>
					        </div>
					      </li>
					      <!-- Date -->
					      <li>
					        <div class="item-content">
					          <div class="item-inner">
					            <div class="item-title label">生日</div>
					            <div class="item-input">
					              <input type="text" data-toggle='date' value="2000-01-01" />
					            </div>
					          </div>
					        </div>
					      </li>
					      <li class="align-top">
					        <div class="item-content">
					          <div class="item-inner">
					            <div class="item-title label">自我介绍</div>
					            <div class="item-input">
					              <textarea>一起去旅游吧</textarea>
					            </div>
					          </div>
					        </div>
					      </li>
					    </ul>
					  </div>
					  <div class="content-block">
					    <div class="row">
					      <div class="col-100"><a href="#" class="button button-big button-fill button-danger">退出账户</a></div>
					    </div>
					  </div>
					</div>
					
					
        </div>
    </div>

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
		<script type="text/javascript">
			$.init();
			$(document).on('click','.create-actions', function () {
		      var buttons1 = [
		        {
		          text: '请选择',
		          label: true
		        },
		        {
		          text: '男',
		          bold: true,
		          color: 'danger',
		          onClick: function() {
								$('#sex').val('男');
		          }
		        },
		        {
		          text: '女',
		          onClick: function() {
								$('#sex').val('女');
		          }
		        }
		      ];
		      var buttons2 = [
		        {
		          text: '取消',
		          bg: 'danger'
		        }
		      ];
		      var groups = [buttons1, buttons2];
		      $.actions(groups);
		  });
		  
		  $("#my-input").calendar({
			    value: ['2015-12-05']
			});
			
			$("#city-picker").cityPicker({
		    toolbarTemplate: '<header class="bar bar-nav"><button class="button button-link pull-right close-picker">确定</button><h1 class="title">选择地址</h1></header>'
		  });
		</script>
  </body>
</html>